<template>
  <div class="all">
      <div class="header">
          <homeHeader></homeHeader>
      </div>
      <div class="body">

        <div class="survey">
                <div class="surveyCh">
                    <div class="roomTit">房间概况</div>
                    <div class="roomContent">
                        <div class="romB">
                            <div class="rName">房间总数</div>
                            <div class="rCount">{{roomCount.roomtotal}}</div>
                        </div>
                        <div class="romB">
                            <div class="rName">可用房间数</div>
                            <div class="rCount">{{roomCount.roomable}}</div>
                        </div>
                        <div class="romB">
                            <div class="rName">不可用房间数</div>
                            <div class="rCount">{{roomCount.roomunable}}</div>
                        </div>
                    </div>
                </div>
                <div class="surveyCh">
                    <div class="roomTit">设备概况</div>
                    <div class="roomContent">
                        <div class="romB">
                            <div class="rName">设备总数</div>
                            <div class="rCount">{{deviceCount.total}}</div>
                        </div>
                        <div class="romB">
                            <div class="rName">在线</div>
                            <div class="rCount">{{deviceCount.online}}</div>
                        </div>
                        <div class="romB">
                            <div class="rName">离线</div>
                            <div class="rCount">{{deviceCount.offline}}</div>
                        </div>
                    </div>
                </div>
                <div class="surveyChAlert">
                    <div class="roomTit">告警列表</div>
                    <div class="alarmList">
                        <div class="listAlert" v-for="(item, index) in alartList">
                            <div class="roomName">{{item.room_name}}</div>
                            <div class="diviceName">{{item.device_name}}</div>
                            <div class="timeName">{{item.createtime}}</div>
                            <div class="statusName">{{item.reason}}</div>
                        </div>
                    </div>
                    </div>
            </div>
            <!-- <div class="rightcontent"> -->
              <div class="room">
                <div class="roomT">房间列表</div>
                <div class="roomList">
                    <div v-for="(item, index) in roomDataList">
                        <roomList :roomData="item"></roomList>
                    </div>
                    
                </div>
                <div class="page"> 
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[page_size, 20, 50, 100, 200]"
                        :page-size="page_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                        </el-pagination>
                    </div>
            </div>
            <!-- </div> -->
        


      </div>

  </div>

</template>

<script>
import roomList from '@/components/roomList/roomList.vue'
import homeHeader from '@/components/homeHeader/homeHeader.vue'
import store from '@/store/index'
import {getAlarm, DeviceCount, GetRoom, UserInfo} from "@/api/dataReq"
import {getUserInfo} from '@/utils/auth'
export default {
  name: 'Home',
  components: {
      roomList,
      homeHeader
  },
  data() {
    return {
      currentPage:1,
      total:10,
      page_size:10,
      alartList:[],
      deviceCount:{},
      roomCount:{},
      roomDataList:[],
      userInfo: {},
      headshot: '',
    }
  },
  created(){
      
      this.getAlartList()
      this.getDeviceCount()
      this.getRoom()
      // console.log(getUserInfo())
      this.getuserInfo()
  },
  methods:{
      handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page_size = val
      this.getRoom()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getRoom()
    },

    getAlartList(){
      var reqData = {recor:1}
      getAlarm(reqData).then(response => {
      if (response.code == '1') {
      //   console.log(response)
       this.alartList = response.data

      } else {
        
      }
    }).catch(error => {
      console.log('err', error)
      
    })
  },
  // 
  getDeviceCount(){
      var reqData = {}
      DeviceCount(reqData).then(response => {
      if (response.code == '1') {
      //   console.log(response)
      this.deviceCount = response.data[0]

      } else {
        
      }
    }).catch(error => {
      console.log('err', error)
      
    })
  },
  getRoom(){
      
      var reqData = {page_size:this.page_size, page_num:this.currentPage}
      GetRoom(reqData).then(response => {
      if (response.code == '1') {
      //   console.log(response)
       
       this.roomDataList = response.data
       this.roomCount = response.count
       this.total = response.total

      } else {
        
      }
    }).catch(error => {
      console.log('err', error)
      
    })
  },
  // 退出
  async logout() {
    await  this.$store.dispatch('user/Logout')
    this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    
  },
  goManage(path){
      this.$router.push({ path: path})
  },
  getuserInfo() {
    var reqData  ={}
      UserInfo(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
         this.userInfo = response.data[0]
         this.headshot =cfg.img_url +  this.userInfo.headshot
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
      // console.log(getUserInfo())
    // this.userInfo = JSON.parse(getUserInfo())
    // this.headshot =cfg.img_url + this.userInfo.headshot
  //   console.log(this.userName)
  },

  }

}
</script>
<style lang="scss" scoped>
.all{
  background-color: black;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: white;
  // align-items: center;
  // justify-content: center;
  // justify-content: space-between;

}
.header{
  width: 100%;
  // height: 100%;
  // box-sizing: border-box;
  // -moz-box-sizing:border-box;
  // border: 1px solid red;
}

.body{
        width: 100%;
        height: 90vh;
        min-height: 600px;
        min-width: 700px;
        // border: 1px solid red;
        // box-sizing:border-box;
        margin-top: auto;
        margin-bottom: auto;
        display: flex;
        flex-direction: row;
        justify-content:space-around;
        background-color: black;
        // border: solid 1px red;
    }
    .survey{
        width: 23%;
        min-width: 300px;
        height: 90vh;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .surveyCh{
          display: flex;
        flex-direction: column;
        justify-content: space-between;
          height: 32%;
          min-height: 200px;
          // border: 1px solid red;
          // box-sizing:border-box;
          background-color: rgba(1,18,67, 1);

            // border: 1px solid yellow;
            // margin-top: 10px;
        //     text-align: center;
        //     margin-top: auto;
        // margin-bottom: auto;
        }
        .surveyChAlert{
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
          height: 32%;
          min-height: 200px;
          // border: 1px solid red;
          // box-sizing:border-box;
          background-color: rgba(1,18,67, 1);
        }
    }
    .roomTit{
        width: 100%;
        height: 40px;
        background-color: rgba(11,44,108,1);
        line-height: 40px;
        font-size: 14px;
    }
    .roomContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        
        height: 90%;
        // height: 100%;
        background-color: rgba(1,18,67, 1);
        
        .romB{
            display: flex;
            flex-direction: column;
            width: 50%;
            // height: 160px;
            font-size: 15px;
            .rName{
                height: 80px;
                line-height: 80px;
            }
            .rCount{
                height: 80px;
                line-height: 80px;
            }
        }
    }
    .listAlert{
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: row;
        // align-items: center;
        justify-content: space-around;

        border-bottom: 1px solid rgba(2,40,114, 1);
        line-height: 30px;
        .statusName{
            color: red;
        }
    }

  .rightcontent{
    height: 100%;
    // width: 100%;
    min-height: 500px;
    width: 76%;
    min-width: 700px;

    // position: relative;
    background-color: rgba(1,18,67, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // margin-left: auto;
    // margin-right: auto;
    // margin-top: 10px;
  }
.room{
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    justify-content: space-around;
    width: 76%;
    height: 90vh;
    min-height: 600px;
    // border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(1,18,67, 1);
    // margin-top: 10px;
    // top: 10px;
    .roomT{
        
        height: 40px;
        width: 100%;
        background-color: rgba(11,44,108,1);
        text-align: left;
        text-indent: 20px;
        line-height: 40px;
        font-size: 15px;
        // margin-top: 10px;
        
    }
    .roomList{
      // border: solid 1px red;
        height: 90%;
        width: 100%;
        // min-height: 900px;
        background-color: rgba(1,18,67, 1);
        position: relative;
        overflow-y: scroll;
        overflow-x: hidden;
        // overflow-y: hidden;
        &::-webkit-scrollbar {
          width: 0;
        }
        
    }
    .page{
            // height: 20px;
            // position: absolute;
            // margin: 10px 300px;
            // margin-right: auto;
            // bottom: 10px;
            // left: auto;
            // right: auto;
            align-items: center;
            
            
        }
}
.alarmList{
    height: 90%;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    // justify-content: space-around;
    overflow-y: scroll;
	overflow-x: hidden;
	// overflow-y: hidden;
	&::-webkit-scrollbar {
      width: 0;
    }
}


/deep/ .active {
    color: rgb(50, 111, 234);;
}
/deep/ .el-input__inner {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .number {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination .btn-prev {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination .btn-next {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination__total {
   
    color: white;
}
/deep/ .el-pagination__jump {
    
    color: white;
}
</style>